<template>
  <div class="page">
    <div class="fixedBox headerBox">
      <van-nav-bar
        title="港湾快讯"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="coment pageContentPaddingT2">
      <div class="message_box">
        <div class="msg_box" @click="goDetail(item.id)" v-for="(item, index) in allList" :key="index">
          <div class="lf_box">
            <div>{{item.name}}</div>
            <span class="time_date">{{item.time}}</span>
          </div>
          <div class="rg_box">
            <img :src="item.img" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      typeId: '',
      allList: []
    }
  },
  created(){
    this.typeId = this.$route.query.typeId
    if (this.typeId) {
      this.userArticleList()
    }
    
  },
  methods:{
    async userArticleList() {
      let res = await this.$http.userArticleList({
        page: 1,
        pageSize: 20,
        type: this.typeId
      })
      if (res) {
        console.log(res)
        this.allList = res.data.list
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goDetail(id) {
      this.$router.push({name: 'articleDetail',query: {id:id}})
    }
  }
};
</script>
<style scoped>
.coment{
  padding: .28rem .29rem 1rem;
  background: #fff;
  min-height: 100vh;
  padding-top: 60px;
}
.msg_box{
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: .12rem;
}
.lf_box,.rg_box{
  width: 50%;
}
.lf_box{
  padding: .16rem 0;
  font-weight: 600;
  position: relative;
}
.lf_box .time_date{
  position: absolute;
  bottom: .1rem;
  font-size: .24rem;
  color: #999999;
}
.rg_box{
  height: 2rem;
}
.rg_box> img{
  width: 100%;
  height: 100%;
  border-radius: .1rem;
}
.fixedBox{
  position: fixed;
  width: 100%;
  z-index: 1;
}
</style>